import { CodeIcon } from 'lucide-react';
import { useEditorStore } from '@/store/useEditorZustand';
import { Button } from 'antd';
import cx from 'classnames';

export default function CodeBlockButton() {
  const { editor } = useEditorStore();
  const hanlerClick = () => {
    editor?.chain().focus().toggleCodeBlock().run();
  };
  const isActive = editor?.isActive('codeBlock');

  return (
    <Button
      icon={<CodeIcon className={cx('size-4')} />}
      type={!isActive ? 'text' : 'link'}
      onClick={hanlerClick}
    />
  );
}
